<template>
  <el-dialog title="表维护" v-model="dialogVisible" width="70%" :close-on-click-modal="false">
    <el-form :model="tableInfo" label-width="100px">
      <el-form-item label="表名">
        <el-input v-model="tableInfo.tableName" disabled></el-input>
      </el-form-item>
      <el-form-item label="注释">
        <el-input v-model="tableInfo.tableComment"></el-input>
      </el-form-item>
      <el-form-item label="字段列表">
        <el-table :data="tableInfo.columns" style="width: 100%">
          <el-table-column prop="columnName" label="字段名">
            <template #default="scope">
              <el-input v-model="scope.row.columnName" :disabled="scope.row.isSystemColumn"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="columnType" label="字段类型">
            <template #default="scope">
              <el-input v-model="scope.row.columnType" :disabled="scope.row.isSystemColumn"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="columnLength" label="长度">
            <template #default="scope">
              <el-input v-model="scope.row.columnLength" :disabled="scope.row.isSystemColumn"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="columnComment" label="注释">
            <template #default="scope">
              <el-input v-model="scope.row.columnComment" :disabled="scope.row.isSystemColumn"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="isRequired" label="必填" width="80">
            <template #default="scope">
              <el-checkbox v-model="scope.row.isRequired" :disabled="scope.row.isSystemColumn"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200px">
            <template #default="scope">
              <el-button type="success" @click="copyField(scope.$index)" :disabled="scope.row.isSystemColumn">复制</el-button>
              <el-button type="danger" @click="removeField(scope.$index)" :disabled="scope.row.isSystemColumn">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveChanges">保 存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { reactive, toRefs,defineExpose } from 'vue';
import { ElMessageBox } from 'element-plus';
import axios from 'axios';

export default {
  name: 'TableMaintain',
  setup() {
    const state = reactive({
      dialogVisible: false,
      tableInfo: {
        tableName: '',
        tableComment: '',
        columns: []
      }
    });

    const showEditDialog = (row) => {
      state.dialogVisible = true;
      state.tableInfo.tableName = row.tableName;
      state.tableInfo.tableComment = row.tableComment;
      state.tableInfo.columns = row.columns.map(column => ({
        ...column,
        isSystemColumn: ['id', 'create_user_id', 'create_time', 'update_time', 'remark'].includes(column.columnName)
      }));
    };
    defineExpose({showEditDialog});

    const copyField = (index) => {
      const newRow = { ...state.tableInfo.columns[index] };
      state.tableInfo.columns.push(newRow);
    };

    const removeField = (index) => {
      state.tableInfo.columns.splice(index, 1);
    };

    const addField = () => {
      state.tableInfo.columns.push({
        columnName: '',
        columnType: '',
        columnLength: '',
        columnComment: '',
        isRequired: false,
        isSystemColumn: false
      });
    };

    const saveChanges = () => {
      // 保存更改逻辑
      axios.put('/api/tableMaintain', state.tableInfo).then(response => {
        ElMessageBox.alert('保存成功', '提示', {
          confirmButtonText: '确定'
        });
        alert(response.data);
        state.dialogVisible = false;
      });
    };

    return {
      ...toRefs(state),
      showEditDialog,
      copyField,
      removeField,
      addField,
      saveChanges
    };
  }
};
</script>

<style scoped>
.dialog-content {
  display: flex;
}

.tree-container {
  width: 30%;
  border-right: 1px solid #ccc;
  padding: 10px;
}

.table-container {
  width: 70%;
  padding: 10px;
}
</style>